<template>
  <div class="content">
    <div :class="main">
      <el-row>
        <el-col :span="20">
          <div :class="dtcontent">
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="12">
                <div class="block">
                  <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
                  <el-carousel height="20em" style="margin-top: 5em">
                    <el-carousel-item v-for="(item, i) in banners" :key="i">
                      <el-image
                        style="width: 100%; height: 100%"
                        :src="item.image"
                        fit="fill"
                      ></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-col>
              <el-col :span="6" style="margin-top: 5em"
                ><vPart :tab="tab"></vPart
              ></el-col>
            </el-row>

            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="8">
                <vPart :tab="tab"></vPart>
              </el-col>
              <el-col :span="8">
                <vPart :tab="tab"></vPart>
              </el-col>
              <el-col :span="8">
                <vPart :tab="tab"></vPart>
              </el-col>
            </el-row>

            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="12">
                <vPart :tab="tab"></vPart>
              </el-col>
              <el-col :span="12">
                <vPart :tab="tab"></vPart>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="4">
          <div :class="dtcontent">
            <div class="dtlist">
              <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  <el-button style="float: right; padding: 3px 0" icon="el-icon-more" type="text"
                    ></el-button
                  >
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                  {{ "列表内容 " + o }}
                </div>
              </el-card>
            </div>
            <div class="dtlist">
              <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  <el-button style="float: right; padding: 3px 0" icon="el-icon-more" type="text"
                    ></el-button
                  >
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                  {{ "列表内容 " + o }}
                </div>
              </el-card>
            </div>
            <div class="dtlist">
              <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                  <span>卡片名称</span>
                  <el-button style="float: right; padding: 3px 0" icon="el-icon-more" type="text"
                    ></el-button
                  >
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                  {{ "列表内容 " + o }}
                </div>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
import vPart from "@/components/Part";

export default {
  name: "Content",
  data() {
    return {
      msg: "标题头=》",
      main: "main",
      dtcontent: "dtcontent",
      tab: {
        header: "标题头",
        list: [
          {
            tittle: "Webpack详细打包流程",
            url: "http://www.baidu.com",
            seecount: 1200,
          },
          {
            tittle: "数据结构——递归学习和汉诺塔问题",
            url: "http://www.baidu.com",
            seecount: 1990,
          },
          {
            tittle: "Java的内存结",
            url: "http://www.baidu.com",
            seecount: 1600,
          },
        ],
      },

      banners: [
        {
          image: "http://gank.io/images/cfb4028bfead41e8b6e34057364969d1",
          title: "干货集中营新版更新",
          url: "https://gank.io/migrate_progress",
        },
        {
          image: "http://gank.io/images/aebca647b3054757afd0e54d83e0628e",
          title: "- 春水初生，春林初盛，春风十里，不如你。",
          url: "https://gank.io/post/5e51497b6e7524f833c3f7a8",
        },
        {
          image: "https://pic.downk.cc/item/5e7b64fd504f4bcb040fae8f.jpg",
          title: "盘点国内那些免费好用的图床",
          url: "https://gank.io/post/5e7b5a8b6d2e518fdeab27aa",
        },
      ],
      lis: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      dts: ["aa", "aa", "aa", "aa", "aa", "aa"],
    };
  },
  methods: {
    btnClick() {
      this.tab.header = this.msg + Math.round(Math.random() * 100); // 生成0~5的随机整数;
    },
  },
  components: {
    vPart,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dtlist {
  width: 90%;
  margin: 1em auto;
  padding-top: 1em;
  padding-bottom: 1em;
}

.content {
  width: 100%;
}
.main {
  width: 80%;
  height: auto;
  margin: 1em auto;
  background-color: #e9eef3;
}

.dtcontent {
  width: 95%;
  height: auto;
  margin: 1em auto;
  background-color: #ffffff;
  border-radius: 1em;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
